<template>

  <van-nav-bar :title="tabListName" left-arrow @click-left="onClickLeft" :fixed="true" />

  <van-list class="result-list" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">


    <ul class="tab-list">
      <li class="tab-list-item" v-for="item in list" :key="item.id">
        <div class="thumb">
          <img :src="getProxyImageUrl(item.pic)" :alt="item.title" />
        </div>
        <div class="info line-ellipsis">
          <div class="title line-ellipsis">{{ item.title }}</div>
          <div class="author line-ellipsis">{{ item.author }}</div>
          <div class="tag line-ellipsis">
            <van-tag plain round v-for="(tag, index) in formatTag(item.tag)" :key="index">{{
              tag
            }}</van-tag>
          </div>
          <div class="popularity">
            人气：{{ Popularity(item.num_look) }}
          </div>
        </div>
        <div class="play">
          <van-icon name="play-circle-o" size="30" color="#ff0000" />
        </div>
      </li>
    </ul>






  </van-list>







</template>



<script setup>
import { getProxyImageUrl } from "@/util/index.js"
import { getHomeMore } from "@/api/index.js"

import { ref, computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();

import { useStore } from "@/stores/index.js"
const store = useStore()


const loading = ref(false);
const finished = ref(false);


const tabId = computed(() => route.params.tabId);

const tabListName = computed(() => store.tabListName);


const pageNum = ref(1);
const pageSize = ref(21);


const list = ref([]);

//人气
const Popularity = computed(() => {
  return (number) => {
    return (number / 10000).toFixed(1) + '万'
  }
});


function formatTag (str) {
  return str.trim().split(/\s+/);
}


onMounted(async () => {
  loading.value = true;
  const res = await getHomeMore(tabId.value, pageNum.value, pageSize.value);

  list.value.push(...res.data);
  loading.value = false;

})


const onLoad = async () => {
  pageNum.value++;
  loading.value = true;
  const res = await getHomeMore(tabId.value, pageNum.value, pageSize.value);

  if (res.data.length === 0) {
    loading.value = false;
    finished.value = true;
    return;
  } else if (res.data.length > 0) {

    list.value.push(...res.data);
    loading.value = false;
  }
}



const onClickLeft = () => {
  router.push('/');
};




</script>




<style scoped>
.result-list {
  margin-top: 44px;
}

.tab-list {
  list-style: none;
  padding: 5px 15px 0 15px;
  margin: 0;
}

.tab-list-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 5px 0;
}



.thumb {
  width: 100px;
  height: 150px;
  overflow: hidden;
  margin-right: 10px;
}

.thumb img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 5px 0;
}


.title {
  color: #666;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}


.author {
  font-size: 12px;
  color: #999;
}

.tag {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}

.popularity {

  font-size: 12px;
  color: #999;
  margin-top: 10px;

}


:deep(.van-tag) {
  margin-right: 5px;
}


.play {
  font-size: 16px;
  color: #666;
  margin-left: auto;
}
</style>
